import React, { Component } from 'react'

const formStateFn = (_this) => ({
  uname: {
    value: '',
    onChange: (e) =>
      _this.setState((state) => ({
        uname: { ...state.uname, value: e.target.value }
      }))
  },
  pass: {
    value: '',
    onChange: (e) =>
      _this.setState((state) => ({
        pass: { ...state.pass, value: e.target.value }
      }))
  }
})

class App extends Component {
  state = {
    count: 100,
    ...formStateFn(this)
  }

  onLogin = () => {
    console.log(this.state)
  }

  render() {
    const { uname, pass } = this.state
    return (
      <div>
        <div>
          账号：
          <input {...uname} />
        </div>
        <div>
          密码：
          <input {...pass} />
        </div>
        <div>
          <button onClick={this.onLogin}>进入系统</button>
        </div>
      </div>
    )
  }
}

export default App
